<template>
  <div class="label-top">
    <el-descriptions title="产品成果信息"></el-descriptions>
    <el-form ref="form" :model="form" label-position="top" :rules="rules" label-width="80px">
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="产品名称" prop="pName">
            <el-input v-model="form.pName" placeholder="请输入产品名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品类型" prop="pType">
            <el-cascader
              :options="productFormTree"
              :props="{value:'code',label:'name' }"
              clearable
              regionTree
              placeholder="请输入产品类型"
              v-model="form.pType"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行业" prop="pIndustry">
            <el-select v-model="form.pIndustry" placeholder="请选择行业">
              <el-option
                v-for="dict in dict.type.product_industry"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="版本型号" prop="pVersion">
            <el-input v-model="form.pVersion" placeholder="请输入版本型号"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品介绍" prop="pIntroduce">
            <el-input v-model="form.pIntroduce" placeholder="请输入产品介绍"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="厂商" prop="pManufacturer">
            <el-input v-model="form.pManufacturer" placeholder="请输入厂商"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">


          <el-form-item label="联系人" prop="pContacts">
            <el-input v-model="form.pContacts" placeholder="请输入联系人"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系方式" prop="pTel">
            <el-input v-model="form.pTel" placeholder="请输入联系方式"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">

          <el-form-item label="关键词" prop="pKeyword">
            <el-input v-model="form.pKeyword" placeholder="请输入关键词"/>
          </el-form-item>

        </el-col>
        <el-col :span="12">
          <el-form-item label="数据来源" prop="pDataSource">
            <el-input v-model="form.pDataSource" placeholder="请输入数据来源"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入备注"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-descriptions title="适配信息"></el-descriptions>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="!multiple"
          @click="handleDelete"
        >批量删除
        </el-button>
      </el-col>
    </el-row>
    <el-table :data="adaptations" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="适配OS" align="center" prop="paOs">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.audition_os" :value="scope.row.paOs"/>
        </template>
      </el-table-column>
      <el-table-column label="适配平台" align="center" prop="paPlatform">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.adaptation_platform" :value="scope.row.paPlatform"/>
        </template>
      </el-table-column>
      <el-table-column label="适配OS版本" align="center" prop="paVersion"/>
      <el-table-column label="OS小版本" align="center" prop="paMinVersion"/>
      <el-table-column label="适配CPU型号" align="center" prop="paCpu">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.adapted_cpu_model" :value="scope.row.paCpu"/>
        </template>
      </el-table-column>
      <el-table-column label="认证状态" align="center" prop="paAuthenticationStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.certification_status" :value="scope.row.paAuthenticationStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="上架情况" align="center" prop="paListing">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.auditing_listing" :value="scope.row.paListing"/>
        </template>
      </el-table-column>
      <el-table-column label="适配状态" align="center" prop="paState">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.auditing_status" :value="scope.row.paState"/>
        </template>
      </el-table-column>
      <el-table-column label="适配时间" align="center" prop="paTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.paTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收费/免费" align="center" prop="paCost"/>
      <el-table-column label="备注" align="center" prop="paRemark"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['info:adaptation:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.index)"
            v-hasPermi="['info:adaptation:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :title="title"
               :visible.sync="open"
               width="800px"
               append-to-body
               destroy-on-close
    >
      <el-form ref="adaptationForm" label-position="top" :model="adaptationForm" :rules="adaptationRules"
               label-width="80px">
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="适配OS" prop="paOs">
              <el-select v-model="adaptationForm.paOs" placeholder="请选择适配OS">
                <el-option
                  v-for="dict in dict.type.audition_os"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="适配时间" prop="paTime">
              <el-date-picker clearable
                              v-model="adaptationForm.paTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择适配时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="适配OS类型" prop="paType">
              <el-select v-model="adaptationForm.paType" placeholder="请选择适配OS类型">
                <el-option
                  v-for="dict in dict.type.auditiing_os_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="适配状态" prop="paState">
              <el-select v-model="adaptationForm.paState" placeholder="请选择适配状态">
                <el-option
                  v-for="dict in dict.type.auditing_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="适配OS版本" prop="paVersion">
              <el-input v-model="adaptationForm.paVersion" placeholder="请输入适配OS版本"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="兼容等级" prop="paLevel">
              <el-select v-model="adaptationForm.paLevel" placeholder="请选择兼容等级">
                <el-option
                  v-for="dict in dict.type.compatibility_level"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="OS小版本" prop="paMinVersion">
              <el-input v-model="adaptationForm.paMinVersion" placeholder="请输入OS小版本"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">

            <el-form-item label="认证状态" prop="paAuthenticationStatus">
              <el-select v-model="adaptationForm.paAuthenticationStatus" placeholder="请选择认证状态">
                <el-option
                  v-for="dict in dict.type.certification_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="8">
            <el-form-item label="适配平台" prop="paPlatform">
              <el-select v-model="adaptationForm.paPlatform" placeholder="请选择适配平台">
                <el-option
                  v-for="dict in dict.type.adaptation_platform"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收费/免费" prop="paCost">
              <el-select v-model="adaptationForm.paCost" placeholder="请输入收费/免费">
                <el-option
                  v-for="dict in dict.type.auditing_cost"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="适配CPU型号" prop="paCpu">
              <el-select v-model="adaptationForm.paCpu" placeholder="请选择适配CPU型号">
                <el-option
                  v-for="dict in dict.type.adapted_cpu_model"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上架情况" prop="paListing">
              <el-select v-model="adaptationForm.paListing" placeholder="请选择上架情况">
                <el-option
                  v-for="dict in dict.type.auditing_listing"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="paRemark">
              <el-input v-model="adaptationForm.paRemark" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="适配验证情况" prop="paValidate">
              <el-select v-model="adaptationForm.paValidate" placeholder="请选择适配验证情况">
                <el-option
                  v-for="dict in dict.type.adaptation_verification_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="安装使用文档" prop="paUsingDocuments">
              <file-upload v-model="adaptationForm.paUsingDocuments"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="适配产品安装包" prop="paInstallPackage">
              <file-upload v-model="adaptationForm.paInstallPackage"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveAdaptationHandler">确 定</el-button>
        <el-button @click="cancelBack">取 消</el-button>
      </div>
    </el-dialog>
    <div class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import EditMixin from "@/minixs/edit"
import request from "@/utils/request";
import {listProductType} from "@/api/info/productType";

export default {
  name: "add",
  mixins: [EditMixin],
  dicts: ['product_industry', 'audition_os', 'adapted_cpu_model', 'compatibility_level', 'adaptation_verification_status', 'adaptation_platform', 'auditing_status', 'auditiing_os_type', 'auditing_listing', 'certification_status','auditing_cost'],
  data() {
    return {
      // 表单数据
      form: {
        id: null,
        pName: null,
        pType: null,
        pIndustry: null,
        pVersion: null,
        pIntroduce: null,
        pManufacturer: null,
        pContacts: null,
        pTel: null,
        pKeyword: null,
        pDataSource: null,
        pStatus: null,
        delFlag: null,
        createBy: null,
        updateBy: null,
        createTime: null,
        updateTime: null,
        remark: null
      },
      // 表单校验
      rules: {
        pName: [
          {required: true, message: "产品名称不能为空", trigger: "blur"}
        ],
        pType: [
          {required: true, message: "产品类型不能为空", trigger: "blur"}
        ],
        pIndustry: [
          {required: true, message: "行业不能为空", trigger: "change"}
        ],
        pVersion: [
          {required: true, message: "版本型号不能为空", trigger: "blur"}
        ],
        pIntroduce: [
          {required: true, message: "产品介绍不能为空", trigger: "blur"}
        ],
        pManufacturer: [
          {required: true, message: "厂商不能为空", trigger: "blur"}
        ],
        pContacts: [
          {required: true, message: "联系人不能为空", trigger: "blur"}
        ],
        pTel: [
          {required: true, message: "联系方式不能为空", trigger: "blur"}
        ],
        pKeyword: [
          {required: true, message: "关键词不能为空", trigger: "blur"}
        ],
        pDataSource: [
          {required: true, message: "数据来源不能为空", trigger: "blur"}
        ],
      },

      // 适配信息
      adaptations: [],
      // 表单数据
      adaptationForm: {
        id: null,
        pid: null,
        paOs: null,
        paTime: null,
        paType: null,
        paState: null,
        paVersion: null,
        paLevel: null,
        paMinVersion: null,
        paAuthenticationStatus: null,
        paPlatform: null,
        paCost: null,
        paCpu: null,
        paListing: null,
        paRemark: null,
        paValidate: null,
        paUsingDocuments: null,
        paInstallPackage: null,
        paStatus: null,
        delFlag: null,
        createBy: null,
        updateBy: null,
        createTime: null,
        updateTime: null,
        remark: null
      },
      // 表单校验
      adaptationRules: {
        pid: [
          {required: true, message: "关联产品不能为空", trigger: "blur"}
        ],
        paOs: [
          {required: true, message: "适配OS不能为空", trigger: "change"}
        ],
        paTime: [
          {required: true, message: "适配时间不能为空", trigger: "blur"}
        ],
        paType: [
          {required: true, message: "适配OS类型不能为空", trigger: "change"}
        ],
        paState: [
          {required: true, message: "适配状态不能为空", trigger: "change"}
        ],
        paVersion: [
          {required: true, message: "适配OS版本不能为空", trigger: "blur"}
        ],
        paLevel: [
          {required: true, message: "兼容等级不能为空", trigger: "change"}
        ],
        paMinVersion: [
          {required: true, message: "OS小版本不能为空", trigger: "blur"}
        ],
        paAuthenticationStatus: [
          {required: true, message: "认证状态不能为空", trigger: "change"}
        ],
        paPlatform: [
          {required: true, message: "适配平台不能为空", trigger: "change"}
        ],
        paCost: [
          {required: true, message: "收费/免费不能为空", trigger: "blur"}
        ],
        paCpu: [
          {required: true, message: "适配CPU型号不能为空", trigger: "change"}
        ],
        paListing: [
          {required: true, message: "上架情况不能为空", trigger: "change"}
        ],
        paRemark: [
          {required: true, message: "备注不能为空", trigger: "blur"}
        ],
        paValidate: [
          {required: true, message: "适配验证情况不能为空", trigger: "change"}
        ],
        paUsingDocuments: [
          {required: true, message: "安装使用文档不能为空", trigger: "blur"}
        ],
        paInstallPackage: [
          {required: true, message: "适配产品安装包不能为空", trigger: "blur"}
        ],
      },
      // 适配消息多选
      multiple: false,
      //
      open: false,
      // 显示标题
      title: "",
      // 选中删除索引
      ids: [],

      // 产品类型
      productFormTree: []
    }
  },
  created() {
    listProductType(this.queryParams).then(response => {
      this.productFormTree = this.handleTree(response.data, "code", "pcode");
    });
    request({
      url: '/info/adaptation/list',
      method: 'get',
      params: {
        pageNum: 1,
        pageSize: 100,
        pid: this.id
      }
    }).then(response => {
      this.adaptations = response.rows;

    });
  },
  mounted() {

    request({
      url: '/info/product/' + this.id,
      method: 'get'
    }).then(res => {
      const form = res.data;
      form.pType = form.pType.split(",");
      this.form = form;
    })
  },
  methods: {
    // 保存数据
    save() {
      const form = {
        ...this.form,
        productAdaptations: this.adaptations
      };
      form.pType = form.pType.join(",")
      if(!form.productAdaptations.length){
        this.$modal.msgError("请添加适配信息");
        return;
      }
      request({
        url: '/info/product',
        method: 'put',
        data: form
      }).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.$emit("reload")
        this.cancel();
      });
    },
    /**
     * 多选删除
     * @param selection
     */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.multiple = true;
    },
    handleAdd() {
      this.title = '添加适配信息'
      this.open = true;
    },
    handleUpdate(row) {
      this.open = true;
      this.title = '修改适配信息';
      this.adaptationForm = JSON.parse(JSON.stringify(row));
    },
    /**
     * 删除
     */
    handleDelete(index) {
      if (index) {
        this.adaptations.splice(index, 1);
        return;
      }
      this.adaptations = this.adaptations.filter(item => {
        return this.ids.indexOf(item.id) !== -1;
      })
      this.multiple = false;
    },
    /**
     * 保存
     */
    saveAdaptationHandler() {
      this.$refs.adaptationForm.validate(valid => {
        if (valid) {
          const form = JSON.parse(JSON.stringify(this.adaptationForm))
          form.id = this.adaptations.length
          this.adaptations.push(form)
          this.adaptationForm = {
            id: null,
            pid: null,
            paOs: null,
            paTime: null,
            paType: null,
            paState: null,
            paVersion: null,
            paLevel: null,
            paMinVersion: null,
            paAuthenticationStatus: null,
            paPlatform: null,
            paCost: null,
            paCpu: null,
            paListing: null,
            paRemark: null,
            paValidate: null,
            paUsingDocuments: null,
            paInstallPackage: null,
            paStatus: null,
            delFlag: null,
            createBy: null,
            updateBy: null,
            createTime: null,
            updateTime: null,
            remark: null
          };
          this.open = false;
          this.title = '';
        }

      })
    },
    cancelBack() {
      this.open = false;
    }
  }
};
</script>
<style scoped>
.dialog-footer {
  padding-top: 30px;
}
</style>
